<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>用户添加</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/css/user.css" media="all" />
	<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
	<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1041315_0zq2yro0cfn.css">
	<style type="text/css">
		.layui-form-item .layui-inline{ width:33.333%; float:left; margin-right:0; }
		@media(max-width:1240px){
			.layui-form-item .layui-inline{ width:100%; float:none; }
		}
		.layui-form-item .role-box {
			position: relative;
		}
		.layui-form-item .role-box .jq-role-inline {
			height: 100%;
			overflow: auto;
		}

	</style>
</head>
<body class="childrenBody">
<div class="layui-form" style="width:80%;">
	<div class="layui-form-item">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
		</fieldset>
	</div>
	<div class="layui-form-item" >
		<label class="layui-form-label">类型</label>
		<div class="layui-input-block">
			<select name="category" th:if="${dictList!=''}">
				<option  th:each="dic:${dictList}" th:value="${dic.id}"th:text="${dic.value}"></option>
			</select>
		</div>
		<button type="button" class="layui-btn" id="chooseFile">
			<i class="layui-icon">&#xe67c;</i>选择文件
		</button> 文件名称: <span id="fileName"></span>
		<div style="height: 20px;"></div>
		<button type="button" class="layui-btn" id="uploadBtn">
			<input type="hidden" name="fileName">
			<input type="hidden" name="webUrl">
			<i class="iconfont icon-cs-dw-xs-1"></i>上传文件
		</button>
		<div style="height: 20px;"></div>
		<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">
			<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block" style="margin-left: 220px">
			<button class="layui-btn" lay-submit="" lay-filter="addResource"> <i class="iconfont icon-fabu"></i>提交</button>
			<button type="reset" class="layui-btn layui-btn-normal"  id="close"> <i class="iconfont icon-xingzhuanggongnengtubiao-"></i>取消</button>
		</div>
	</div>
</div>
</body>
</form>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/common/address.js"></script>
<script>
    layui.config({
        base: '/js/common/' //假设这是你存放拓展模块的根目录
    }).use(['form','jquery','upload','element','layer','common'],function(){
        //创建监听函数
        var xhrOnProgress=function(fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            //使用闭包实现监听绑
            return function() {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }
        var form = layui.form,
            $    = layui.jquery,
            layer = layui.layer,
         upload = layui.upload,
            element = layui.element,
            common = layui.common;
        upload.render({
            elem: '#chooseFile', // 文件选择
            accept:'file',
            url: '/file/upload/?status=1',
            field: 'test',
            auto: false, // 设置不自动提交
            bindAction: '#uploadBtn', // 提交按钮
            xhr: xhrOnProgress,
            progress: function(value) {
                console.log("进度：" + value + '%');
                element.progress('progressBar',value  + '%');
            },
            choose: function(obj) {
                obj.preview(function(index, file, result) {
                    $("#fileName").html(file.name);
                });
            },
            done: function(res) {
                layer.msg("上传成功", {time: 1000}, function () {
                    $("input[name='webUrl']").val(res.data.url);
                    $("input[name='fileName']").val(res.data.name);
                })
            },
            error: function(res) {
                layer.msg(res.msg);
            }
        });
        form.on("submit(addResource)",function(data){

            var userSaveLoading = top.layer.msg('数据提交中，请稍候',{icon: 16,time:500,shade:0.8});

            $.post("add",data.field,function (res) {
                top.layer.close(userSaveLoading);
                if(res.code===200){
                    common.cmsLaySucMsg("添加成功");
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭                        //刷新父页面
                    parent.location.reload();
                }else{
                    top.layer.close(userSaveLoading);
                    common.cmsLayErrorMsg("添加失败");
                    parent.layer.close(index); //再执行关闭
                }

            });
            return false;
        });
        $('#close').click(function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    });
</script>
</body>
</html>